<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="format-detection" content="telephone=no">
    <title>飞机大战 - 经典射击游戏</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="game-container">
        <div class="header">
            <h1>✈️ 飞机大战 ✈️</h1>
            <div class="info">
                <div class="score-display">
                    <span>得分：</span>
                    <span id="score">0</span>
                </div>
                <div class="level-display">
                    <span>等级：</span>
                    <span id="level">1</span>
                </div>
                <div class="lives-display">
                    <span>生命：</span>
                    <span id="lives">❤️❤️❤️</span>
                </div>
            </div>
        </div>

        <div id="gameCanvas">
            <div id="startScreen" class="screen">
                <h2>准备起飞！</h2>
                <div class="instructions">
                    <p>🎮 游戏说明：</p>
                    <ul>
                        <li>使用 ← → 方向键或鼠标/触摸移动飞机</li>
                        <li>按空格键或点击屏幕发射子弹</li>
                        <li>击落敌机得分，连续击杀获得连击加成</li>
                        <li>拾取道具：❤️加血 🛡️护盾 ⚡武器升级</li>
                        <li>达到500分触发第一个Boss</li>
                        <li>击败Boss后2秒自动进入下一关Boss战</li>
                        <li>连续击败5个Boss即可通关！</li>
                    </ul>
                </div>
                <button id="startBtn" class="game-btn">开始游戏</button>
                <div class="tips">
                    <p>💡 提示：击败每个Boss后会自动进入下一关！保持血量和护盾充足！</p>
                </div>
            </div>

            <div id="gameOverScreen" class="screen hidden">
                <h2>游戏结束！</h2>
                <p class="final-score">最终得分：<span id="finalScore">0</span></p>
                <p class="high-score">最高纪录：<span id="highScore">0</span></p>
                <button id="restartBtn" class="game-btn">重新开始</button>
            </div>

            <div id="gameWinScreen" class="screen hidden">
                <h2>🎉 恭喜通关！🎉</h2>
                <div class="win-stats">
                    <p class="win-message">你已经击败了所有关卡的Boss！</p>
                    <div class="stats-grid">
                        <div class="stat-item">
                            <span class="stat-label">最终得分</span>
                            <span class="stat-value" id="winScore">0</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">最高纪录</span>
                            <span class="stat-value" id="winHighScore">0</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">总击杀</span>
                            <span class="stat-value" id="winKills">0</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-label">最大连击</span>
                            <span class="stat-value" id="winCombo">0</span>
                        </div>
                    </div>
                </div>
                <button id="restartWinBtn" class="game-btn">再来一次</button>
                <div class="tips">
                    <p>🏆 你是真正的王牌飞行员！</p>
                </div>
            </div>

            <canvas id="canvas"></canvas>
        </div>

        <div class="footer">
            <p>提示：保持专注，躲避敌机！祝你好运！🍀</p>
        </div>
    </div>

    <script src="game.js"></script>
</body>
</html>

